<template>
  <!-- 系统设置模块-流转设置页面 -->
  <div class="fillcontain bgfff">
    <!-- 标题 -->
    <!--<div class="fastQuery bgfff">
      <el-row>
        <el-col :span="6" class="fastQuery_title">
          <i class="el-icon-tickets"></i><span> 节点流转管理</span></el-col>
        <el-col :span="8"></el-col>
      </el-row>
    </div>-->
    <!-- 表单 -->
    <el-form ref="nodeChangeForm"
             :model="nodeInfo"
             label-width="140px"
             class="form_container bgfff">
      <el-row>
        <el-col :span="8" class="mb15">
          <el-form-item label="节点编码" prop="routeid">
            <el-input v-model="nodeInfo.routeid" readonly placeholder="节点编码"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="mb15">
          <el-form-item label="节点名称" prop="content">
            <el-input v-model="nodeInfo.content" readonly placeholder="节点名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="mb15">
          <el-form-item label="归属业务" prop="business">
            <el-select v-model="nodeInfo.business" disabled placeholder="归属业务">
              <el-option
                  v-for="item in busiTypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="mb15">
          <el-form-item label="归属模块" prop="module">
            <el-select v-model="nodeInfo.module" disabled placeholder="归属模块">
              <el-option
                  v-for="item in taskModules"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="contain autoSettings">
      <div class="table_container check_contain">
        <div class="fastQuery">
          <el-row>
            <el-col :span="6" class="fastQuery_title">
              <i class="el-icon-tickets"></i><span> 流转下一节点</span></el-col>
            <el-col :span="8"></el-col>
          </el-row>
        </div>
        <el-row>
          <el-col :span="2" class="pt20 pb20">&nbsp;</el-col>
          <el-col :span="8" class="pt20 pb20">
            <div class="transfer_box">
              <div class="transfer_title">
                <el-checkbox :indeterminate="isIndeterminateL"
                             v-model="checkAllL"
                             @change="handleCheckAllChangeL">待分配节点
                </el-checkbox>
              </div>
              <div class="transfer_con">
                <el-checkbox-group v-model="checkedLeftNodes" @change="handleCheckedNodeChangeL">
                  <el-checkbox class="el_checkbox_List"
                               v-for="item in leftNodes"
                               :label="item.routeid"
                               :key="item.routeid">{{item.content}}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="transfer_botton">
              <el-col :span="24" class="text_center pb10 pt30 mt30">
                <el-button type="danger" plain @click="clickL">确认</el-button>
              </el-col>
              <el-col :span="24" class="text_center pb10">
                <el-button type="danger" plain @click="clickAllL">全选</el-button>
              </el-col>
              <el-col :span="24" class="text_center pb10">
                <el-button type="danger" plain @click="clickR">删除</el-button>
              </el-col>
              <el-col :span="24" class="text_center pb10">
                <el-button type="danger" plain @click="clickAllR">全删</el-button>
              </el-col>
            </div>
          </el-col>
          <el-col :span="8" class="pt20 pb20">
            <div class="transfer_box">
              <div class="transfer_title">
                <el-checkbox :indeterminate="isIndeterminateR"
                             v-model="checkAllR"
                             @change="handleCheckAllChangeR">已分配节点
                </el-checkbox>
              </div>
              <div class="transfer_con">
                <el-checkbox-group v-model="checkedRightNodes" @change="handleCheckedNodeChangeR">
                  <el-checkbox class="el_checkbox_List"
                               v-for="item in rightNodes"
                               :label="item.destNode"
                               :key="item.destNode">{{item.content}}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- <el-row class="pb20 pt20 bor_top mt20">
      <el-col :span="12" class="text_right pr20">
        <el-button type="danger" @click="close" class="dangerbutton">返回</el-button>
      </el-col>
      <el-col :span="12">
        <el-button type="danger" @click="save" class="Defaultbutton">提交</el-button>
      </el-col>
    </el-row> -->
    <el-row slot="footer" class="dialog-footer">
      <el-button type="danger" @click="close" class="dangerbutton">返回</el-button>
      <el-button type="danger" @click="save" class="Defaultbutton">提交</el-button>
    </el-row>
  </div>
</template>
<script>
  import constant from '@/utils/constant';
  import {doNodeChange, getNodeChange} from "@/api/setting";

  export default {
    props: {
      id: Number
    },
    data() {
      return {
        nodeId: this.id,
        nodeInfo: {
          id: '',
          routeid: '',
          content: '',
          business: '',
          module: ''
        },
        checkedLeftNodes: [], // 左侧已选择节点
        leftNodes: [], // 左侧节点list显示数据
        allNodesInfo: [], // 左侧节点list原始数据
        checkedRightNodes: [], // 右侧已选择节点
        rightNodes: [], // 右侧节点list
        radioTask: '2',
        busiTypes: constant.busiTypes, // 归属业务
        taskModules: constant.taskModules, // 归属模块
        // 穿梭框
        checkAllL: false,
        checkAllR: false,
        isIndeterminateL: false,
        isIndeterminateR: false,
      }
    },
    created() {
      console.log('传入参数：', this.nodeId);
      this.initInfo();
    },
    mounted() {
    },
    methods: {
      // 根据节点ID查询所有信息
      initInfo() {
        getNodeChange(this.nodeId).then(res => {
          if (res.resultCode == constant.SUCCESS && res.data) {
            this.nodeInfo = res.data.info;
            let that = this;
            let allNodes = {};
            this.leftNodes = res.data.all.filter(item => {
              allNodes[item.routeid] = item.content;
              if (item.routeid != that.nodeInfo.routeid) {
                const isHave = res.data.selected.filter(item_s => {
                  return item_s.destNode == item.routeid;
                });
                if (isHave && isHave.length > 0) {
                  return false;
                }
                return true;
              }
            });
            this.allNodesInfo = res.data.all;
            const selectedNodes = res.data.selected.map(item => {
              item['content'] = allNodes[item.destNode];
              return item;
            });
            this.rightNodes = selectedNodes;
          }
        });
      },
      // 保存
      save() {
        let params = this.rightNodes.map(item => {
          return {
            id: item.id ? item.id : null,
            srcNode: item.srcNode,
            destNode: item.destNode,
            business: item.business,
            module: item.module
          };
        });
        let condition = {
          srcNode: this.nodeInfo.routeid,
          nodes: params,
        }
        doNodeChange(condition).then(res => {
          if (res.resultCode == constant.SUCCESS) {
            this.$message({
              type: 'success',
              message: '提交成功！'
            });
            this.close();
            this.$emit("getList");
          }
        });
      },
      // 关闭弹框
      close() {
        this.$emit("close");
      },
      // 点击确认
      clickL() {
        debugger
        if (this.checkedLeftNodes.length == 0) {
          this.$message({
            type: 'warning',
            message: '请在左列至少选中一个节点'
          });
        }
        let selectedNodes = this.leftNodes.filter(item => {
          const selectedIndex = this.checkedLeftNodes.indexOf(item.routeid);
          if (selectedIndex >= 0) {
            return true;
          }
          return false;
        });
        this.leftNodes = this.leftNodes.filter(item => {
          const selectedIndex = this.checkedLeftNodes.indexOf(item.routeid);
          if (selectedIndex >= 0) {
            return false;
          }
          return true;
        });
        selectedNodes = selectedNodes.map(item => {
          return {
            srcNode: this.nodeInfo.routeid,
            destNode: item.routeid,
            content: item.content,
            business: item.business,
            module: item.module,
          };
        });
        this.rightNodes = [...this.rightNodes, ...selectedNodes];
        this.checkedLeftNodes = [];
        this.isIndeterminateL = false;
      },
      // 点击全选
      clickAllL() {
        if (this.leftNodes.length == 0) {
          this.$message({
            type: 'warning',
            message: '左列无数据'
          });
          return false;
        }
        const selectedNodes = this.leftNodes.map(item => {
          return {
            srcNode: this.nodeInfo.routeid,
            destNode: item.routeid,
            content: item.content,
            business: item.business,
            module: item.module,
          };
        });
        this.rightNodes = [...this.rightNodes, ...selectedNodes];
        this.leftNodes = [];
        this.checkedLeftNodes = [];
        this.isIndeterminateL = false;
        this.isIndeterminateR = false;
      },
      // 点击删除
      clickR() {
        if (this.checkedRightNodes.length == 0) {
          this.$message({
            type: 'warning',
            message: '请在右列至少选中一个节点'
          });
        }
        let selectedNodes = this.rightNodes.filter(item => {
          const selectedIndex = this.checkedRightNodes.indexOf(item.destNode);
          if (selectedIndex >= 0) {
            return true;
          }
          return false;
        });
        this.rightNodes = this.rightNodes.filter(item => {
          const selectedIndex = this.checkedRightNodes.indexOf(item.destNode);
          if (selectedIndex >= 0) {
            return false;
          }
          return true;
        });
        // selectedNodes = selectedNodes.map(item => {
        //   return {
        //     routeid: item.destNode,
        //     content: item.content
        //   };
        // });
        selectedNodes = this.allNodesInfo.filter(item => {
          // if (item.routeid != that.nodeInfo.routeid) {
          //   }
          const isHave = selectedNodes.filter(item_s => {
            return item_s.destNode == item.routeid;
          });
          if (isHave && isHave.length > 0) {
            return true;
          }
          return false;
        });
        this.leftNodes = [...this.leftNodes, ...selectedNodes];
        this.checkedRightNodes = [];
        this.isIndeterminateR = false;
      },
      // 点击全删
      clickAllR() {
        if (this.rightNodes.length == 0) {
          this.$message({
            type: 'warning',
            message: '右列无数据'
          });
          return false;
        }
        // const selectedNodes = this.rightNodes.map(item => {
        //   return {
        //     routeid: item.destNode,
        //     content: item.content
        //   };
        // });
        const selectedNodes = this.allNodesInfo.filter(item => {
          // if (item.routeid != that.nodeInfo.routeid) {
          //   }
          const isHave = this.rightNodes.filter(item_s => {
            return item_s.destNode == item.routeid;
          });
          if (isHave && isHave.length > 0) {
            return true;
          }
          return false;
        });
        this.leftNodes = [...this.leftNodes, ...selectedNodes];
        this.rightNodes = [];
        this.checkedRightNodes = [];
        this.isIndeterminateL = false;
        this.isIndeterminateR = false;
      },
      // 穿梭框
      handleCheckAllChangeL(val) {
        this.checkedLeftNodes = val ? this.leftNodes.map(item => {
          return item.routeid;
        }) : [];
        this.isIndeterminateL = false;
      },
      handleCheckAllChangeR(val) {
        this.checkedRightNodes = val ? this.rightNodes.map(item => {
          return item.destNode;
        }) : [];
        this.isIndeterminateR = false;
      },
      handleCheckedNodeChangeL(value) {
        let checkedCount = value.length;
        this.checkAllL = checkedCount === this.leftNodes.length;
        this.isIndeterminateL = checkedCount > 0 && checkedCount < this.leftNodes.length;
      },
      handleCheckedNodeChangeR(value) {
        let checkedCount = value.length;
        this.checkAllR = checkedCount === this.rightNodes.length;
        this.isIndeterminateR = checkedCount > 0 && checkedCount < this.rightNodes.length;
      }
    },
    computed: {},
  }
</script>
<style lang="less" scoped>
  .fillcontain {
    padding-bottom: 0;

    .fastQuery {
      padding: 15px 20px 10px 20px;
      border-bottom: 1px solid #e1e1e1;

      .fastQuery_title {
        color: #666;
        padding: 6px 0px;
      }
    }

    .form_container {
      padding: 20px 0 10px 0;
      margin: 0 auto;
      // width: 90%;
    }
  }

  .contain {
    background: #fff;
    padding: 10px;
    margin-bottom: 20px;

    .check_contain {
      .fastQuery_title {
        color: #333;
        font-weight: bold;
      }

      .checkList {
        padding: 15px 20px 15px 60px;
      }

    }
  }

  .autoSettings {
    background-color: #f9f9f9 !important;
    // width: 90%;
    margin: 0 auto;
    padding: 0 20px !important;
  }

  // 穿梭框
  .transfer_botton {
    padding: 20px 0;
  }

  .transfer_box {
    min-height: 260px;
    background-color: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 5px;

    .transfer_title {
      padding: 15px 20px;
      border-bottom: 1px solid #e1e1e1;
      color: #333;
    }

    .transfer_con {
      padding: 10px 20px;

      .el_checkbox_List {
        width: 98%;
        padding: 6px 0;
      }
    }
  }

  /deep/.dialog-footer {
    text-align: center!important;
  }
</style>
